<template>
    <div>
        <!-- 顶部 -->
        <NavTop class="navtop-contacts">
            <div class="navtop-title">联系人</div>
        </NavTop>
        <!-- 中间内容部分 -->
        <div class="content">
            <SearchInput/>
            <div class="new-user" @click="goAgreeApply('新朋友')">
                新朋友<div class="dots" v-show="friendNoticeNum!=0">{{ friendNoticeNum }}</div><van-icon name="arrow" />
            </div>
            <div class="new-user" @click="goAgreeApply('群通知')">
                群通知<div class="dots" v-show="groupNoticeNum!=0">{{ groupNoticeNum }}</div><van-icon name="arrow" />
            </div>
            <!-- 好友/群聊切换（只做切换） -->
            <van-tabs v-model="active" @change="changeTabCard">
                <van-tab :title="item.title" v-for="(item,index) in checkCar" :key="index"></van-tab>
            </van-tabs>
            <!-- 好友/群列表 -->
            <van-empty
                class="custom-image"
                :image="noFriendOrGroupImg"
                description="暂无更多"
                v-if="!dataList.length"
            />
            <FriendOrGroupList v-else class="friend-groop-content" :dataList="dataList" :listType="listType"/>
        </div>
        <!-- 底部tabbar -->
        <Tabbar/>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop'
import SearchInput from '@/components/SearchInput'
import FriendOrGroupList from '@/components/FriendOrGroupList'
import Tabbar from '@/components/Tabbar'
import { reqGetContactsFriendList, reqGetContactsGroupList } from '@/api'
import { mapState } from 'vuex'
export default {
    components: {
        NavTop,
        SearchInput,
        FriendOrGroupList,
        Tabbar
    },
    data() {
        return {
            checkCar: [
                { title: '好友' },
                { title: '群聊' }
            ],
            active: 0,
            friendList: [],
            groupList: [],
            dataList: [],
            noFriendOrGroupImg: './images/no_friendOrgroup.png',
            listType: 0,
        }
    },
    computed: {
        ...mapState({
            userId: state => state.login.userInfo._id,
            friendNoticeNum: state => state.notice.friendNoticeNum,
            groupNoticeNum: state => state.notice.groupNoticeNum
        })
    },
    methods: {
        // 选项卡切换回调
        changeTabCard(index) {
            this.dataList = []
            if (index === 0) {
                // 好友列表
                this.dataList = this.friendList
                this.listType = 0
            } else {
                // 群列表
                this.dataList = this.groupList
                this.listType = 1
            }
        },
        // 获取联系人页面的好友列表
        async getContactsFriendList() {
            let userId = this.userId
            let res = await reqGetContactsFriendList({userId})
            if (res.status === 200) {
                res.data.forEach(item => {
                    this.friendList.push(item.friendId)
                    this.dataList = this.friendList
                })
            }
        },
        // 获取联系人页面的群列表
        async getContactsGroupList() {
            let userId = this.userId
            let res = await reqGetContactsGroupList({userId})
            if (res.status === 200) {
                res.data.forEach(item => {
                    this.groupList.push(item.groupId)
                })
            }
        },
        // 去同意申请页面
        goAgreeApply(type) {
            this.$router.push(`/agreeapply/${type}`)
        }
    },
    mounted() {
        this.getContactsFriendList()
        this.getContactsGroupList()
    }
}
</script>

<style lang="less" scoped>
.navtop-contacts {
    position: fixed;
    top: 0;
    left: 0;
}
.content {
    width: 100%;
    height: 100vh;
    padding: 1.5999rem .4rem 1.3333rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .new-user {
        width: 100%;
        height: 1.4667rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .4rem;
        border-bottom: .04rem solid #f6f6f6;
    }
    .friend-groop-content {
        width: 100%;
        flex: 1;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .friend-groop-content::-webkit-scrollbar {
        display: none;
    }
}
.dots {
    width: .5rem;
    height: .5rem;
    background-color: #f06262;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-left: auto;
    margin-right: .1333rem;
}
</style>

<style>
.van-tabs__line {
    background-color: #4dc0ff;
}
.custom-image .van-empty__image {
    margin-top: .6667rem;
    width: 3.3333rem;
    height: 3.3333rem;
}
</style>